{extend name="layout/layout" /}

{block name="header"}
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">{$title?$title:'商城'}</h1>
		<div class="mui-pull-right mui-icon confirm-btn" onclick="indexVue.submit()">完成</div>
	</header>
{/block}

{block name="style"}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
	<style>
		.mui-bar .mui-icon.confirm-btn{
			font-size: 18px;
			line-height: 25px;
		}
		.top-cate{
			background: #EEE;
			color:#9B9B9B;
			height: 500px;
			overflow-y: scroll;
		}

		.mui-table-view{
			background: #EEE;
		}

		.mui-table-view-cell{
			padding: 15px 0;
			text-align: center;
			font-size:14px;
		}
		.mui-table-view-cell:after{
			left: 0;
			color: #E1E1E1;
		}

		.mui-table-view-cell.active{
			background: #fff;
			color: #333;
		}

		.son-cate{
			padding: 10px 5px;
			height: 500px;
			overflow-y: scroll;
			background: #fff;
		}

		.goods{
			display: flex;
			border-bottom: 1px solid #eee;
			padding: 5px 10px;
		}

		.goods .goods-info{
			padding-left: 10px;
			color: #333;
			flex: 1
		}

		.goods .goods-img{
			width: 50px
		}

		.goods .goods-price{
			display: flex;
			justify-content: space-between;
			width: 100%;
			align-items: center;
		}

		.goods .goods-price .price{
			color: #e60012;
		}

		.mui-switch{
			height: 22px;
		}

		.mui-switch-mini{
			width: 38px;
		}

		.mui-switch .mui-switch-handle{
			height: 20px;
			width: 20px;
		}

	</style>
{/block}

{block name="main"}
	<div class="category-index mui-row" v-cloak>
		<div class="mui-col-xs-3 top-cate">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell" :class="ti == cateIndex?'active':''" @tap="cateIndex = ti,getGoods()" v-for="(tc, ti) in topCates">{{tc.name}}</li>
			</ul>
		</div>	

		<div class="mui-col-xs-9 son-cate">
			<div class="goods" v-for="goods in topCates[cateIndex]['goods']">
				<div class="goods-img">
					<img :src="goods.original_image" class="img-responsive" alt="">
				</div>
				<div class="goods-info">
					<div class="goods-name">{{goods.goods_name}}</div>
					<div class="goods-price">
						<div class="price">￥{{goods.shop_price}}</div>
						<div class="mui-switch mui-switch-mini" :class="goods.select_status == 1 ? 'mui-active' :''" @tap="switchGoods(goods)">
						  <div class="mui-switch-handle"></div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
{/block}

{block name="script"}
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
	<script>
		var wh = $(document).height()-52;
		$('.top-cate,.son-cate').css({'height':wh+'px'});
		var indexVue = new Vue({
			el:'.category-index',
			data: {
				topCates: [{
					goods:[]
				}],
				cateIndex: 0,
				selectIds: [],
				delIds: [],
			},
			mounted: function(){
				this.getTopCate();
			},
			methods: {
				//获取一级分类
				getTopCate: function(){
					var that = this;
					layer.open({
						type:2,
						shadeClose: false
					});
					request(that, {'url': 'category/index'}, function(responsive){
						layer.closeAll();
						if(responsive.code == 200){
							
							if(responsive.data.category.length > 0) {
								responsive.data.category.forEach(function(item){
									item.goods = [];
								});
								that.topCates = responsive.data.category;
								that.getGoods();
							}
						}
					})
				},
				//获取一级分类下的子分类
				getGoods: function(){
					var that = this;
					//没有商品才请求
					if(this.topCates[this.cateIndex]['goods'].length > 0) {
						return false;
					}
					layer.open({
						type:2,
						shadeClose: false
					});
					var cid = this.topCates[this.cateIndex]['id'];
					var url =  'usershop/getCategoryGoods';
					request(that, {'url': url,'data': {'id':cid}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							var goods = res.data;
							if(goods.length > 0) {
								goods.forEach(function(item){
									item.select_status = item.select_status == 1?true:false;
									item.old_status = item.select_status;
								})
							}
							that.topCates[that.cateIndex]['goods'] = goods;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//切换选择商品
				switchGoods: function(goods){
					goods.select_status = !goods.select_status;
					//原来没选，现在选
					if(goods.old_status == false && goods.select_status == true) {
						this.selectIds.push(goods.id);
					} else if(goods.old_status == false && goods.select_status == false) {
						this.selectIds.splice(this.selectIds.indexOf(goods.id), 1);
					} else if(goods.old_status == true && goods.select_status == true) {
						this.delIds.splice(this.delIds.indexOf(goods.id), 1);
					} else {
						this.delIds.push(goods.id);
					}
				},
				//提交
				submit: function(){
					var data = {
						del_ids: this.delIds.toString(),
						select_ids: this.selectIds.toString()
					}

					if(!data.del_ids && !data.select_ids) {
						mui.alert('请选择商品');return;
					}

					layer.open({
						type:2,
						shadeClose: false
					});
					var that = this;

					request(that, {'url': 'usershop/selectGoods','data': data}, function(res){
						if(res.code == 200) {
							mui.alert(res.msg, '提示', function(){
								mui.back();
							})
						} else {
							layer.closeAll();
							mui.toast(res.msg);
						}	
					});
				}
			
             
			}
		});
	</script>
{/block}

{block name="navbar"}{/block}